import React, { Component, lazy } from 'react';
import { TabBar } from 'antd-mobile';

import {connect} from 'react-redux'

// 引入图片
import home from '@/assets/images/index.png'
import homeActive from '@/assets/images/index-on.png'
import sale from '@/assets/images/youhui.png'
import saleActive from '@/assets/images/youhui-on.png'
import discover from '@/assets/images/find.png'
import discoverActive from '@/assets/images/find-on.png'
import equip from '@/assets/images/zhuangbei.png'
import equipActive from '@/assets/images/zhuangbei-on.png'
import more from '@/assets/images/more.png'
import moreActive from '@/assets/images/more-on.png'


@connect( state=>({tabBarMenu: state.getIn(['sale','tabBarMenu'])}) , null)
class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'discover',
      hidden: false,
    };
  }

  render() {
    const patnname = this.props.location.pathname;
    return (
      <div style={{ boxShadow: '0 0 0.12rem 0.01667rem rgba(0,0,0,.5)', display:this.props.tabBarMenu, position: 'fixed', height: '49px', width: '100%', bottom: 0, zIndex: 9 }}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#000"
          barTintColor="white"
          hidden={false}
        >
          <TabBar.Item
            title="首页"
            key="home"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${home}) center center /  21px 21px no-repeat` }}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${homeActive}) center center /  21px 21px no-repeat` }}
            />
            }
            selected={!patnname.indexOf('/home')}
            // badge={1}
            onPress={() => {
              this.props.history.push('/home')
            }}
            data-seed="logId"
          >
            {/* <Home /> */}
          </TabBar.Item>
          <TabBar.Item
          // style={{display:"flex"}}
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${sale}) center center /  21px 21px no-repeat` }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${saleActive}) center center /  21px 21px no-repeat` }}
              />
            }
            title="优惠"
            key="sale"
            // badge={'new'}
            selected={!patnname.indexOf('/sale')}
            onPress={() => {
              this.props.history.push('/sale/choiceness')
            }}
            data-seed="logId1"
          >
            {/* <Sale/> */}
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${discover}) center center /  21px 21px no-repeat` }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${discoverActive}) center center /  21px 21px no-repeat` }}
              />
            }
            title="发现"
            key="discover"
            // dot
            selected={!patnname.indexOf('/discover')}
            onPress={() => {
              this.props.history.push('/discover/today')
            }}
          >
            {/* <Discover /> */}
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${equip}) center center /  21px 21px no-repeat` }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${equipActive}) center center /  21px 21px no-repeat` }}
              />
            }
            title="装备"
            key="equip"
            // dot
            selected={!patnname.indexOf('/equip')}
            onPress={() => {
              this.props.history.push('/equip')
            }}
          >
            {/* <Equip /> */}
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${more}) center center /  21px 21px no-repeat` }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${moreActive}) center center /  21px 21px no-repeat` }}
              />
            }
            title="更多"
            key="more"
            // dot
            selected={!patnname.indexOf('/more')}
            onPress={() => {
              this.props.history.push('/more')
            }}
          >
            {/* <More /> */}
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}

export default index;
